.dialog-dam {
  .status {
    margin-top: 10px;

    .title {
      font-size: 15px;
      font-weight: 600;
      display: flex;
      justify-content: space-around;
    }

    tr:nth-child(2n) {
      background-color: #f5f8fa;
    }

    th {
      background-color: #dbe4ea;
    }

    th,
    td {
      color: #555;
      font-family: MicrosoftYaHei;
      font-size: 12px;
      padding: 7px;
    }
  }

  .diagram-gate {
    position: relative;
    margin: 10px 44px;

    .gate-bg {
      width: 100%;
    }

    .gate-box {
      position: absolute;
      width: 66px;
      height: 88px;
      top: 120px;

      .gate {
        height: 70px;
        background-image: url(../../../../assets/images/map/monitor/gate.png);
        background-position: top;
        background-size: cover;
      }

      .gate-dangban {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
      }
    }

    .gate-wrap1 {
      .gate-box {
        top: 112px;

        &:nth-of-type(1) {
          left: 348px;
        }
      }
    }

    .gate-wrap2 {
      .gate-box {
        &:nth-of-type(1) {
          left: 263px;
        }

        &:nth-of-type(2) {
          left: 430px;
        }
      }
    }

    .gate-wrap3 {
      .gate-box {
        &:nth-of-type(1) {
          left: 182px;
        }

        &:nth-of-type(2) {
          left: 347px;
        }

        &:nth-of-type(3) {
          left: 512px;
        }
      }
    }

    .water-box {
      position: absolute;
      left: 0;
      bottom: 2px;

      &.water-box1 {
        bottom: 19px;
      }

      img {
        width: 100%;
      }

      .water {
        background-color: #54aef6;
        opacity: 0.4;
        margin: 0 auto;
        height: 30px;
      }

      .water1 {
        width: 432px;
      }

      .water2 {
        width: 598px;
      }

      .water3 {
        width: 100%;
      }
    }
  }

  .chart-wrap {
    display: flex;
    justify-content: center;

    .chart-title {
      text-align: center;
      font-size: 15px;
      font-weight: 600;
    }
  }

  .chart-wrap1 {
    display: flex;
    justify-content: center;
    align-items: center;

    .chart-title {
      text-align: center;
      font-size: 15px;
      font-weight: 600;
    }

    .gate-wrap {
      background-image: url(../../../../assets/images/map/monitor/gate-bg1.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 45%;
      height: 160px;
      position: relative;

      .gate-box {
        position: absolute;
        width: 34px;
        height: 46px;
        top: 56px;
        left: 174px;

        .gate {
          height: 70px;
          background-image: url(../../../../assets/images/map/monitor/gate.png);
          background-position: top;
          background-size: cover;
        }

        .gate-dangban {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
        }
      }

      .water-box {
        background-image: url(../../../../assets/images/map/monitor/water1.png);
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        bottom: 24px;
        width: 100%;
        height: 38px;

        .water {
          background-color: #54aef6;
          opacity: 0.4;
          margin: 15px 83px 0;
          height: 18px;
        }
      }
    }


    .chart-box {
      width: 45%;
    }
  }
}
